<template>
	<view class="content">
		<Header></Header>
		<view class='home-tabs'>
			<u-tabs 
				:list="topBar" 
				@change="changeTabs" 
				:current='current'
				:inactiveStyle="{
					color: '#AAAAAA'
				}"
				:activeStyle="{
					color: '#333333',
					fontWeight: 'bold',
					fontSize: '29rpx'
				}"
			></u-tabs>
		</view>
		<view class='home-swiper'>
			<swiper :duration="500" :current='current' @change='changeSwiper'>
				<swiper-item v-for='(item,index) in topBar' :key='index'>
					<component :is='activeCom'></component>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import Header from '@/components/common/Header.vue'
import Recommend from '@/components/home/recommend.vue'
import Free from '@/components/home/free.vue'
import ActualCombat from '@/components/home/actualCombat.vue'
export default{
	data () {
		return {
			current:0,
			topBar: [{
				name: '今日推荐',
			}, {
				name: '免费课程',
			}, {
				name: '实战课程'
			}],
			activeCom:Recommend
		}
	},
	methods:{
		//切换tabs
		changeTabs( {index} ){
			this.current = index;
			this.tabsCom( index );
		},
		//切换swiper
		changeSwiper( e ){
			this.current = e.detail.current;
			this.tabsCom( e.detail.current );
		},
		//判断动态组件显示
		tabsCom( index ){
			switch( index ){
				case 0:
					this.activeCom = Recommend;
				break;
				case 1:
					this.activeCom = Free;
				break;
				case 2:
					this.activeCom = ActualCombat;
				break;
			}
		}
	},
	components:{
		Header,
		Recommend,
		Free,
		ActualCombat
	}
}
</script>

<style>
/deep/ .u-tabs__wrapper__nav__item__text{
	font-size: 29rpx;
	font-weight: 400;
}
.home-swiper{
	padding: 29rpx;
}
</style>